<template>
  <div class="page-content">
    <!-- 主体区域 -->
    <el-row :gutter="10"
            style="margin-bottom:10px">
      <el-col :span="5">
        <el-button type="primary"
                   @click="addBaseDialog = true">新增基地信息</el-button>
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <the-table :data="baseList"
               :showPage="false">
      <!-- <el-table-column type="selection"
                       width="55"></el-table-column> -->
      <!-- 拓展列 -->
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left"
                   inline>
            <el-form-item label="介绍:">
              <span>{{scope.row.introduction}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="ID"
                       prop="id">
      </el-table-column>
      <el-table-column label="名称"
                       prop="name" />
      <el-table-column label="负责人"
                       prop="principalName" />
      <el-table-column label="地址"
                       min-width="120px">
        <template slot-scope="scope">
          {{address(scope.row)}}
        </template>
      </el-table-column>

      <el-table-column label="影像信息">
        <template slot-scope="scope">
          <tip-btn tipPlace="top"
                   icon="el-icon-picture-outline"
                   type="text"
                   tipMessage="展示图片"
                   @click="showPictrue(scope.row)"></tip-btn>
          <tip-btn tipPlace="top"
                   icon="el-icon-video-camera"
                   type="text"
                   style="color: #FA6962"
                   tipMessage="展示视频"
                   @click="showVideo(scope.row)"></tip-btn>
        </template>
      </el-table-column>

    </the-table>
    <!-- 分页器区域 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :page-sizes="[5, 10, 25, 50]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :page-size="pageSize"
                   :current-page="pageNum"
                   :total="total">
    </el-pagination>

    <!-- 新建基地信息对话框 -->
    <el-dialog :visible.sync="addBaseDialog"
               @close="addBaseDialogClose"
               title="新建基地信息"
               width="50%"
               top="20vh">
      <el-form :model="addBaseForm"
               :rules="addBaseFormRules"
               ref="addBaseFormRef"
               inline
               label-width="100px">
        <el-form-item label="基地名称"
                      prop="name">
          <el-input v-model="addBaseForm.name"></el-input>
        </el-form-item>
        <el-form-item label="负责人"
                      prop="principalName">
          <el-input v-model="addBaseForm.principalName"></el-input>
        </el-form-item>
        <el-form-item label="省市"
                      prop="province_city">
          <!-- 省市区三级联动 -->
          <el-cascader size="large"
                       clearable
                       :options="options"
                       v-model="selectedOptions"
                       @change="handleCascaderChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址"
                      prop="detailedAddress">
          <el-input v-model="addBaseForm.detailedAddress"></el-input>
        </el-form-item>
        <el-form-item label="介绍"
                      prop="introduction">
          <el-input type="textarea"
                    v-model="addBaseForm.introduction"></el-input>
        </el-form-item>

        <!-- 上传图片视频区域 -->

        <el-row :gutter="30">
          <!-- 图片上传 -->
          <el-col :span="10"
                  class="upload_container">
            <div class="upload_label">上传图片</div>
            <el-upload action="123"
                       ref="uploadPicRef"
                       :on-remove="handleRemovePic"
                       :on-success="handleSuccess"
                       :on-change="handleChange"
                       :http-request="uploadPic"
                       :file-list="picList"
                       list-type="picture-card"
                       :limit="1"
                       :auto-upload="false">
              <i slot="default"
                 class="el-icon-plus"></i>
              <!-- 预览部分 -->
              <div slot="file"
                   slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail"
                     :src="file.url">
                <span class="el-upload-list__item-actions">
                  <!-- 预览选择的文件 -->
                  <!-- <span class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span> -->
                  <!-- 移除选择的文件 -->
                  <span class="el-upload-list__item-delete"
                        @click="handleRemovePic(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-col>

          <!-- 视频上传 -->
          <el-col :span="10"
                  class="upload_container">
            <div class="upload_label">上传视频</div>
            <!--自定义上传 action随便绑定字符串不能为空 -->
            <el-upload action="123"
                       ref="uploadVedioRef"
                       :on-remove="handleRemoveVedio"
                       :on-success="handleSuccess"
                       :on-change="handleChange"
                       :http-request="uploadVideo"
                       :file-list="vedioList"
                       list-type="picture-card"
                       :limit="1"
                       :auto-upload="false">
              <i slot="default"
                 class="el-icon-plus"></i>
              <!-- 预览部分 -->
              <div slot="file"
                   slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail"
                     :src="file.url"
                     alt="">
                <span class="el-upload-list__item-actions">
                  <!-- 预览选择的文件 -->
                  <!-- <span class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span> -->
                  <!-- 移除选择的文件 -->
                  <span class="el-upload-list__item-delete"
                        @click="handleRemoveVedio(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-col>
        </el-row>

      </el-form>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addBaseDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="addBaseInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 展示图片/视频对话框 -->
    <el-dialog :title="infoDialogTitle"
               :visible.sync="infoDialog"
               width="50%">
      <div>
        <template v-if="showingPic">
          <img :src="src"
               width="100%">
        </template>
        <template v-else>
          <!-- <video :src="src"
                 width="100%"
                 autoplay
                 controls></video> -->
          <iframe :src="src"
                  width="100%"
                  height="400"
                  id="ysOpenDevice"
                  allowfullscreen=""></iframe>
        </template>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import tipBtn from '@/components/common/TipButton.vue'
// 导入省市json数据
import { provinceAndCityData, CodeToText } from 'element-china-area-data'
export default {
  name: 'BaseInformation_B',
  meta: {
    title: '基地信息'
  },
  components: {
    tipBtn
  },
  data () {
    return {
      addbase: false,//新增基地的卡片
      baseList: [],
      //分页器数据
      pageNum: 1,
      pageSize: 5,
      total: 0,

      infoDialog: false,//展示影音信息对话框
      showingPic: true,//正在展示图片_对话框展示
      src: '',//资源地址
      //新增基地信息对话框
      addBaseDialog: false,
      // 省市区三级联动数据
      options: provinceAndCityData,//地区数据列表
      selectedOptions: [],//省市区选中值
      addBaseFormRules: {
        name: [{ required: true, message: '请输入基地名称', trigger: 'blur' }, { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }],
        principalName: [{ required: true, message: '请输入负责人', trigger: 'blur' }, { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }],
        detailedAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }, { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }],
        province_city: []
      },
      addBaseForm: {
        city: "",
        detailedAddress: "",
        // enterpriseId: 0,
        introduction: "",
        name: "",
        principalName: "",
        province: "",
      },
      // 文件列表
      picList: [],
      vedioList: [],
      //上传图片视频的表单
      picForm: new FormData(),
      vedioForm: new FormData(),
      columns: [
        { name: "头像", show: true },
        { name: "用户名", show: true },
        { name: "手机号", show: true },
        { name: "邮箱", show: true },
        { name: "性别", show: true },
        { name: "部门", show: true },
        { name: "状态", show: true },
        { name: "创建日期", show: true },
      ]
    }
  },
  created () {
    //获取基地信息
    this.getBaseInfo()
  },
  computed: {
    infoDialogTitle () {
      return this.showingPic ? "图片展示" : "视频展示"
    }
  },
  methods: {
    //获取基地列表
    async getBaseInfo () {
      const { data: res } = await this.$http.get(`/breed/Base/list/${this.pageNum}/${this.pageSize}`)
      if (res.statusCode !== 20000)
        return this.$message.error('获取基地信息失败')
      //获取基地列表成功
      // 保存数据
      this.baseList = res.data.records
      this.total = res.data.total
      // console.dir(res);
    },
    // 过滤器函数 用于拼接省市县
    address ({ province, city, detailedAddress }) {
      // console.log(this.baseList)
      return `${province} ${city} ${detailedAddress}`
    },
    showPictrue (row) {
      //保存地址
      // this.src = 'http://www.vooec.com/member/Pic/20144/20144376126820.jpg'
      this.src = 'http://120.77.156.205:9800' + row.picture
      this.showingPic = true
      this.infoDialog = true
      console.log(row.picture);
    }
    ,
    showVideo (row) {
      //保存地址
      // this.src = 'https://qkeep.cn/mp4/gezi.mp4'
      // this.src = 'http://120.77.156.205:9800' + row.video ///usr/local/go-fastdfs/files/_big/4
      this.src = 'https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/G24611150/2.hd.live&autoplay=1&accessToken=at.18n72pxv5tgi9c979aswb09r85ij2zhi-5q68vlwdyt-1s5blzg-hapmfpu6p'
      this.showingPic = false
      this.infoDialog = true
      console.log(row.video);
    },

    //级联选择器监听选中
    handleCascaderChange ([prv, city]) {
      if (prv && city) {
        //通过区域码获取对应区域名
        // console.log(CodeToText[prv]);
        // console.log(CodeToText[city]);
        //保存省市
        this.addBaseForm.province = CodeToText[prv]
        this.addBaseForm.city = CodeToText[city]
        return
      }
      // 选择器被清空
      this.addBaseForm.province = ''
      this.addBaseForm.city = ''
    },
    // ！！！添加基地信息
    addBaseInfo () {


      // 表单校验
      this.$refs.addBaseFormRef.validate(async flag => {
        if (!flag)
          return this.$message.error('请正确填写表单')
        //校验省市
        if (this.selectedOptions.length < 2)
          return this.$message.error('请选择省市')

        //发送新增请求


        const { data: res } = await this.$http.post('/breed/Base/save', this.addBaseForm)
        if (res.statusCode !== 20000)
          return this.$message.error('添加失败')

        console.log(res.data.id);
        const id = res.data.id

        //上传图片视频
        this.uploadPic(id)
        this.uploadVideo(id)


        this.addBaseDialog = false
        this.$message.success('添加成功')

        //刷选列表
        this.getBaseInfo()

      })

    },
    // 监听添加信息对话框关闭
    addBaseDialogClose () {
      // 表单验证清除
      this.$refs.addBaseFormRef.resetFields()
      // 图片视频清除
      this.$refs.uploadPicRef.clearFiles()
      this.$refs.uploadVedioRef.clearFiles()

    },
    handleSizeChange (newPageSize) {
      this.pageSize = newPageSize
      this.getBaseInfo()

      // console.log(this.pageSize);
      // console.log('[ newPageSize ] >', newPageSize)
    },
    handleCurrentChange (newPageNum) {
      this.pageNum = newPageNum
      this.getBaseInfo()
      // console.log(this.pageNum);
      // console.log('[ newPageNum ] >', newPageNum)
    },
    handleRemovePic (file) {
      this.$refs.uploadPicRef.clearFiles()
    },
    handleRemoveVedio (file) {
      this.$refs.uploadVedioRef.clearFiles()
    },
    handleSuccess (response, file, fileList) {
      console.log(response, file, fileList);
    },
    //选中文件处理函数
    handleChange ({ raw }) {
      // console.log(raw);
      // 匹配文件类型正则
      const re_vedio = /video\/.*/
      const re_picture = /image\/.*/
      //根据不同文件类型 保存到对应Form
      if (re_vedio.test(raw.type)) {
        this.vedioForm.append('file', raw)
        // console.log(this.vedioForm.getAll('file'));

      }
      if (re_picture.test(raw.type)) {
        this.picForm.append('file', raw)
        // console.log(this.picForm.getAll('file'));

      }


    },
    async uploadPic (id) {
      // console.log(this.picForm.get('file'));
      // console.log(this.picForm);

      //表单对象非空发送请求
      if (this.picForm.get('file').name) {
        const { data: res } = await this.$http.post('/breed/Base/uploadPicture/' + id, this.picForm)
        console.log(res);
        if (res.statusCode !== 20000) return this.$message.error('添加图片失败')
        this.$message.success('添加图片成功')
      }

    },
    async uploadVideo (id) {
      // console.log(this.picForm.get('file'));
      // console.log(this.picForm);

      //表单对象非空发送请求
      if (this.vedioForm.get('file').name) {
        const { data: res } = await this.$http.post('/breed/Base/uploadVideo/' + id, this.vedioForm)
        console.log(res);
        if (res.statusCode !== 20000) return this.$message.error('添加视频失败')
        this.$message.success('添加视频成功')
      }
    }

  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-input--suffix .el-input__inner {
  padding-right: 15px !important;
}
/deep/ .el-textarea__inner {
  min-width: 196px;
}
/deep/ .el-upload {
  margin-left: 20px;
}
.upload_container {
  display: flex;
  justify-content: center;
}
.upload_label {
  text-align: right;
  width: 100px;
}
.el-pagination {
  margin-top: 6px;
  text-align: center;
}

//上传缩略图对齐upload
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  margin: 0 8px 8px 20px;
}
</style>
